<script name="homepage" setup>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import Icon from '../../../components/icon/index.vue';


const store = useStore();
const router = useRouter();

// 新鲜好物
store.dispatch('homepage/updateFresh');
// 人气推荐
store.dispatch('homepage/updatePopular');
// 热门品牌
store.dispatch('homepage/updateBrand');
// 轮播图
store.dispatch('homepage/updateBanner');
// 商品分类
store.dispatch('homepage/updateGoods');
// 热门推荐
store.dispatch('homepage/updateNewGoods');
// 轮播图
const bannerList = computed(() => store.state.homepage.bannerList);
// 新鲜好物
const freshList = computed(() => store.state.homepage.freshList);
// 人气推荐
const popularList = computed(() => store.state.homepage.popularList);
// 热门品牌
const brandList = computed(() => store.state.homepage.brandList);
// 商品分类
const goodsList = computed(() => store.state.homepage.goodsList);
onMounted(() => {
  // 当livinghome滚动到视野中时,dispatch
  // const livinghomeObserver = new IntersectionObserver((entries) => {
  //   entries.forEach((entry) => {
  //     if (entry.isIntersecting) {
  //       store.dispatch('homepage/updateGoods');
  //     }
  //   });
  // });
});
// 最新推荐
const newgoodsList = computed(() => store.state.homepage.newgoodsList);
// 分类
const headerList = computed(() => store.state.homepage.headerList);
// 滑动
const slide = ref(false);
// 轮播图右侧推荐
const rigthBanner = ref(0);
function onJumpParticulars(id) {
  router.push({
    name: '三级分类',
    params: {
      id,
    },
  });
}

function onJumpLeft() {
  slide.value = false;
}
function onJumpRigth() {
  slide.value = true;
}

function onMouseEnter(id) {
  rigthBanner.value = id;
}

function onMouseLeave() {
  rigthBanner.value = 0;
}

function onJumpSubCategory(id) {
  router.push({
    name: '二级分类',
    params: {
      id,
    },
  });
}

</script>

<template>
  <div class="main">
    <div class="carousel">
      <div class="classify">
        <div
          v-for="item in headerList"
          :key="item.id"
          @mouseenter="onMouseEnter(item.id)"
          @mouseleave ="onMouseLeave"
        >
          <a>{{ item.name }}</a>
          <a
            @click="onJumpSubCategory(item.children[0]?.id)"
          >{{ item.children[0]?.name }}</a>
          <a
            href=""
            v-for="child in item.children.slice(1, 2)"
            :key="child.id"
          >{{ child.name }}</a>
          <div
            class="carousel-commodity-container"
            v-show="rigthBanner === item.id"
          >
            <div class="carousel-commodity-title">
              <span class="">分类推荐</span>
              <span>根据您的购买或浏览记录推荐</span>
            </div>
            <div
              class="recommend-container"
            >
              <div
                class="recommend-card"
                v-for="c in item.goods"
                :key="c.id"
                @click="onJumpParticulars(c.id)"
              >
                <div class="recommend-card-img">
                  <img :src="c.picture">
                </div>
                <div class="recommend-card-rigth">
                  <div>{{ c.name }}</div>
                  <div class="recommend-card-desc">{{ c.desc }}</div>
                  <div class="recommend-card-price">￥{{ c.price }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <a href="">品牌</a>
          <a href="">品牌推荐</a>
        </div>
      </div>
      <el-carousel indicator-position="outside" :interval="5000" arrow="always">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a :href="item.hrefUrl"><img :src="item.imgUrl"/></a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 好物推荐 -->
    <div>
      <div class="title">
        <div class="left">
          <h3>新鲜好物</h3>
          <span>新鲜出炉 品质靠谱</span>
        </div>
        <div class="rigth">
          查看全部
          <el-icon style="vertical-align: -15%"><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="card-container">
        <div
          class="card"
          v-for="item in freshList"
          :key="item.id"
        >
          <img :src="item.picture">
          <div class="describe-container">
            <span class="describe">{{ item.name }}</span>
            <span class="price">{{ item.price }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div>
      <div class="title">
        <div class="left">
          <h3>人气推荐</h3>
          <span>人气爆款 不容错过</span>
        </div>
      </div>
      <div class="card-container">
        <div
          class="card"
          v-for="item in popularList"
          :key="item.id"
        >
          <img :src="item.picture">
          <div class="describe-container">
            <span class="describe">{{ item.title }}</span>
            <span class="recommend">{{ item.alt }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门推荐 -->
    <div class="hot-container">
      <div class="hot-title">
        <div class="hot-left">
          <h3>热门推荐</h3>
          <span>人气爆款 不容错过</span>
        </div>
        <div class="hot-rigth">
          <div
            @click="onJumpLeft()"
            :class="slide ? 'jump-left' : 'jump-left-forbidden'"
          >
            <el-icon><ArrowLeft /></el-icon>
          </div>
          <div
            @click="onJumpRigth()"
            :class="slide ? 'jump-rigth-forbidden' : 'jump-rigth'"
          >
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
      <div
        :class="slide ? 'sub-hot-container rigth-hot-container' : 'sub-hot-container'"
      >
        <div
          class="card-hot"
          v-for="item in brandList"
          :key="item.id"
        >
          <img :src="item.picture">
        </div>
      </div>
    </div>
    <!-- 居家 -->
    <div
      class="livinghome"
      ref="livinghome"
    >
      <div class="title">
        <h3>{{ headerList[0]?.name }}</h3>
        <div>
          <span
            v-for="item in headerList[0]?.children"
            :key="item.id"
            class="livinghome-right"
          >
            {{ item.name }}
          </span>
          <span
            class="more"
          >
            查看更多
            <el-icon style="vertical-align: -15%"><ArrowRight /></el-icon>
          </span>
        </div>
      </div>
      <div class="livinghome-container">
        <div class="left-box">
          <img :src="goodsList[0]?.picture" alt="">
        </div>
        <div class="rigth-box">
          <div
            v-for="item in goodsList[0]?.goods"
            :key="item.id"
            class="rigth-box-item"
          >
            <div class="img-picture">
              <img :src="item.picture">
            </div>
            <div>{{ item.name }}</div>
            <p class="desc">{{ item.desc }}</p>
            <div class="rigth-box-price">{{ '￥' + item.price }}</div>
            <div class="upward">
              <div>
                <div class="similarity">找相似</div>
                <div class="discover">发现更多宝贝</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>

      </div>
    </div>
    <!-- 美食 -->
    <div class="livinghome">
      <div class="title">
        <h3>{{ headerList[1]?.name }}</h3>
        <div>
          <span
            v-for="item in headerList[1]?.children"
            :key="item.id"
            class="livinghome-right"
          >
            {{ item.name }}
          </span>
          <span
            class="more"
          >
            查看更多
            <el-icon style="vertical-align: -15%"><ArrowRight /></el-icon>
          </span>
        </div>
      </div>
      <div class="livinghome-container">
        <div class="left-box">
          <img :src="goodsList[1]?.picture" alt="">
        </div>
        <div class="rigth-box">
          <div
            v-for="item in goodsList[1]?.goods"
            :key="item.id"
            class="rigth-box-item"
          >
            <div class="img-picture">
              <img :src="item.picture">
            </div>
            <div>{{ item.name }}</div>
            <p class="desc">{{ item.desc }}</p>
            <div class="rigth-box-price">{{ '￥' + item.price }}</div>
            <div class="upward">
              <div>
                <div class="similarity">找相似</div>
                <div class="discover">发现更多宝贝</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>

      </div>
    </div>
    <!-- 服饰 -->
    <div class="livinghome">
      <div class="title">
        <h3>{{ headerList[2]?.name }}</h3>
        <div>
          <span
            v-for="item in headerList[2]?.children"
            :key="item.id"
            class="livinghome-right"
          >
            {{ item.name }}
          </span>
          <span
            class="more"
          >
            查看更多
            <el-icon style="vertical-align: -15%"><ArrowRight /></el-icon>
          </span>
        </div>
      </div>
      <div class="livinghome-container">
        <div class="left-box">
          <img :src="goodsList[2]?.picture" alt="">
        </div>
        <div class="rigth-box">
          <div
            v-for="item in goodsList[2]?.goods"
            :key="item.id"
            class="rigth-box-item"
          >
            <div class="img-picture">
              <img :src="item.picture">
            </div>
            <div>{{ item.name }}</div>
            <p class="desc">{{ item.desc }}</p>
            <div class="rigth-box-price">{{ '￥' + item.price }}</div>
            <div class="upward">
              <div>
                <div class="similarity">找相似</div>
                <div class="discover">发现更多宝贝</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>

      </div>
    </div>
    <!-- 母婴 -->
    <div class="livinghome">
      <div class="title">
        <h3>{{ headerList[3]?.name }}</h3>
        <div>
          <span
            v-for="item in headerList[3]?.children"
            :key="item.id"
            class="livinghome-right"
          >
            {{ item.name }}
          </span>
          <span
            class="more"
          >
            查看更多
            <el-icon style="vertical-align: -15%"><ArrowRight /></el-icon>
          </span>
        </div>
      </div>
      <div class="livinghome-container">
        <div class="left-box">
          <img :src="goodsList[3]?.picture" alt="">
        </div>
        <div class="rigth-box">
          <div
            v-for="item in goodsList[3]?.goods"
            :key="item.id"
            class="rigth-box-item"
          >
            <div class="img-picture">
              <img :src="item.picture">
            </div>
            <div>{{ item.name }}</div>
            <p class="desc">{{ item.desc }}</p>
            <div class="rigth-box-price">{{ '￥' + item.price }}</div>
            <div class="upward">
              <div>
                <div class="similarity">找相似</div>
                <div class="discover">发现更多宝贝</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>

      </div>
    </div>
    <!-- 最新专题 -->
    <div class="livinghome">
      <div class="title">
        <h3>最新推荐</h3>
        <div>
          <span
            class="more"
          >
            查看更多
            <el-icon style="vertical-align: -15%"><ArrowRight /></el-icon>
          </span>
        </div>
      </div>
      <div class="Recommend-container">
        <div
          v-for="item in newgoodsList"
          :key="item.id"
          class="Recommend-item"
        >
          <div class="img-container">
            <img :src="item.detailsUrl">
            <div class="img-describe">
              <div class="left-img-describe">
                <div class="left-title">{{ item.title }}</div>
                <div class="left-summary">{{ item.summary }}</div>
              </div>
              <div class="rigth-img-describe">
                <span>￥{{ item.lowestPrice }}起</span>
              </div>
            </div>
            <div class="masking">

            </div>
          </div>
          <div class="like-container">
            <div class="like">
              <div class="like-icon-container">
                <span class="like-icon">
                  <icon name="ai-xin" :size="15"/>
                </span>
                <span>{{ item.collectNum }}</span>
              </div>
              <div>
                <span>
                  <el-icon style="vertical-align: -15%"><View /></el-icon>
                </span>
                <span>{{ item.viewNum }}</span>
              </div>
            </div>
            <div>
              <el-icon style="vertical-align: -15%"><ChatLineSquare /></el-icon>
              <span>{{ item.replyNum }}</span>
            </div>
          </div>
        </div>
      </div>
      <div>

      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>

  $a: #b28b95;
  $white:#f5f5f5;
.main {
  padding: 0 130px;
  height: 1000px;
  background-color: $white;

  .carousel {
    position: relative;

    .carousel-commodity-container {
      position: absolute;
      width: calc(1089px - 270px);
      height: 500px;
      right: -335%;
      top: 0;
      z-index: 18;
      padding: 0 10px;
      background-color: rgba(255, 255, 255, 0.8);
      // display: none;
      .carousel-commodity-title {
        padding: 22px 0;

        span:nth-child(1) {
          font-size: 18px;
          font-weight: 500;
          color: #333;
          padding-right: 4px;
        }
        span:nth-child(2) {
          font-size: 14px;
          font-weight: 500;
          color: #999;
        }
      }

      .recommend-container {
        width: 100%;
        height: calc(100% - 80px);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-gap: 10px;
        // 透明白色
        // background-color: rgba(255, 255, 255, 0.8);

        .recommend-card {
          display: flex;
          align-items: center;
          background-color: $white;
          border-radius: 4px;

          .recommend-card-img {
            width: 64px;
            height: 64px;

            &>img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .recommend-card-rigth {
            padding-left: 4px;
            .recommend-card-desc {
              width: 160px;
              color: #999;
              // 省略号
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .recommend-card-price {
              color: $red
            }
          }

          &:hover {
            background-color: #e3f9f4;
            cursor: pointer;
          }

        }
      }

    }
    .classify {
      position: absolute;
      width: 250px;
      height: 50px;
      left: 0;
      z-index: 5;

      &>div {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;

        a {
          display: inline-block;
          cursor: pointer;
          text-decoration: none;
          line-height: 50px;
          text-align: center;
          color: #fff;
          font-size: 14px;
        }

        // 选择第二个a标签
        a:nth-child(2) {
          padding: 0 4px;
        }

        &:hover {
          background-color: $c;
        }
      }


    }

    // .classify:hover .carousel-commodity-container {
    //     display: block;
    //   }


    :deep(.el-carousel__container) {
      height: 500px;
    }

    :deep(.el-carousel__arrow--left) {
      left: 280px;
    }

    :deep(.el-carousel__button) {
      // 画小圆点
      border-radius: 50%;
      width: 10px;
      height: 10px;
      background-color: $a;
      opacity: 0.5;

      // &.is-active {
      //   background-color: $c;
      //   opacity: 1;
      // }

    }
    :deep(.el-carousel__indicators--outside) {
      position: absolute;
      bottom: 60px;
      right: 30%;
    }

    :deep(.el-carousel__indicator--horizontal) {
      display: inline-block;
      margin: 0 4px;
    }

  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;

    .left {
      display: flex;
      // align-items: center;
      h3 {
        font-size: 18px;
        font-weight: 500;
      }

      span {
        margin-left: 4px;
        line-height: 65px;
        font-size: 14px;
        color: #999;
      }
    }

    .rigth {
      font-size: 14px;
      color: #999;
    }
    .rigth:hover {
      cursor: pointer;
      color: $c;
    }
  }

  .card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    box-sizing: border-box;
    .card {
      width: 260px;
      height: 400px;
      box-sizing: border-box;
      box-shadow: 0 0 0 #ccc;
      transform: translateY(0px);
      transition: all 0.5s linear;
      background-color: #f0f9f4;

      img {
        display: block;
        width:auto;
        height:auto;
        max-width:100%;
        max-height:100%;
      }

      .describe-container {
        // height: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;

        .describe {
          margin-top: 12px;
          padding: 0 22px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 22px;
        }

        .price {
          padding: 4px 0;
          color: $red;
          font-size: 22px;
        }
      }

      // 人气推荐的
      .recommend {
        color: #999;
        padding: 8px 0;
      }


    }

    .card:hover {
        cursor: pointer;
        box-shadow: 0 0 10px #ccc;
        transform: translateY(-2px);
      }
  }

  .hot-container{
    overflow: hidden;
    .hot-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;

    .hot-left {
      display: flex;
      // align-items: center;
      h3 {
        font-size: 18px;
        font-weight: 500;
      }

      span {
        margin-left: 4px;
        line-height: 65px;
        font-size: 14px;
        color: #999;
      }
    }

    .hot-rigth {
      display: flex;

      .jump-left {
        background-color: $c;
      }

      .jump-left-forbidden {
        cursor:not-allowed;
      }
      .jump-rigth {
        background-color: $c;
      }

      .jump-rigth-forbidden {
        cursor:not-allowed;
      }

      &>div {
        width: 20px;
        height: 20px;
        background-color: #cccccc;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 20px;
        color: #fff;
        background-color: #999;
      }

      div:nth-child(1) {
        margin-right: 4px;
        }
    }

    .rigth {
      font-size: 14px;
      color: #999;
    }
    .rigth:hover {
      cursor: pointer;
    }
  }
    .sub-hot-container {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-gap: 8px;
      transition: all 0.5s linear;

      // 热门推荐的
      .card-hot {
        width: 215px;
        height: 300px;


        img {
          text-align: center;
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }

    .rigth-hot-container {
      cursor: pointer;
      transform: translateX(-1110px);
    }

  }

  .livinghome {
    display: flex;
    flex-direction: column;

    .title {

      h3 {
        font-size: 18px;
        font-weight: 500;
      }
      .livinghome-right {
        padding: 4px;
        margin-right: 20px;
        border-radius: 4px;

        &:hover {
          cursor: pointer;
          color: $white;
          background-color: $c;
        }
      }

      .more {
        color: #999;

        &:hover {
          cursor: pointer;
          color: $c;
        }
      }
    }

    .livinghome-container{
      width: 100%;
      height: 610px;
      display: flex;

      .left-box {
        width: 240px;
        height: 100%;
        margin-right: 4px;

        img {
          display: inline-block;
          height: 100%;
          width: 240px;
          object-fit: cover;
        }

        &:hover {
          cursor: pointer;
        }
      }

      .rigth-box {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 4px;
        font-size: 16px;
        box-sizing: border-box;

        .rigth-box-item {
          position: relative;
          padding: 0 20px;
          overflow: hidden;
          box-sizing: border-box;
          border: 1px solid transparent;
          transition: all 1s linear;
          .img-picture {
            padding: 0 2px;
            text-align: center;
            img {
              width: 160px;
              height: 160px;
              display: inline-block;
            }

            &:hover {
              cursor: pointer;
            }
          }

          &:hover {
            border: 1px solid $c;
          }

          .desc {
            // padding: 4px 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .upward {
            position: absolute;
            left: 0;
            bottom: -90px;
            height: 90px;
            width: 100%;
            transition: all .5s linear;
            background-color: $c;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0px solid $c;

              &>div {

              .similarity {
                color: $white;
                padding-bottom: 8px;
              }

              .discover {
                border-top: 1px solid $white;
                color: $white;
                font-size: 14px;
                padding: 4px 12px;
              }

              &:hover {
                cursor: pointer;
              }
            }
          }

          &:hover .upward {
            bottom: 0;
            border: 1px solid $c;
          }


        }

        .rigth-box-price {
          color: $red;
        }

      }
    }

    // 最新推荐
    .Recommend-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 8px;

      .Recommend-item {
        transition: all .4s linear;
        box-shadow: 0 0 0px #ccc;
        transform: translateY(0px);

        .img-container {
          position: relative;
          box-sizing: border-box;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
          }

          .img-describe {
            position: absolute;
            bottom: 0;
            margin: 8px 0;
            width: 100%;
            z-index: 8;


            .left-img-describe {
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding-left: 10px;

              .left-title {
                color: $white;
              }

              .left-summary {
                // 深灰色
                color: #999;
                text-shadow: 0 0 2px #000;
                font-size: 14px;
              }

              .left-title,
              .left-summary {
                width: 70%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }


            }

            .rigth-img-describe {
              position: absolute;
              width: 100%;
              top: 50%;
              transform: translate(0, -50%);

              &>span {
                position: absolute;
                background-color: $white;
                padding: 2px;
                right: 10px;
                top: 50%;
                transform: translate(0, -50%);
                color: red;
                border-radius: 2px;
              }
            }


          }

          .masking {
            position: absolute;
            bottom: 0;
            height: 100px;
            width: 100%;
            // 透明黑色渐变
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
            z-index: 7;
          }
        }

        .like-container {
          display: flex;
          padding: 30px 10px;
          align-items: center;
          justify-content: space-between;


          .like {
            display: flex;
            align-items: center;
            justify-content: center;

            .like-icon-container {
              padding-right: 24px;
              .like-icon {
                vertical-align: middle;

              }
            }
          }
        }

        &:hover {
          cursor: pointer;
          transform: translateY(-2px);
          box-shadow: 0 0 10px #ccc;
        }
      }
    }
  }

  .box {
    width: 100%;
    height: 100px;
    background-color: red;
  }

}
</style>
